<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
 <div id="app">
    <cpn :cnum1="num1" :cnum2="num2"
         @num1change="num1change"
         @num2change="num2change"
    ></cpn>
    <h2>父组件num1:{{num1}}</h2>
    <h2>父组件num2:{{num2}}</h2>
 </div>

 <template id="cpn">
   <div>
     <h2>props:{{cnum1}}</h2>
     <input type="text" :value="dnum1" @input="num1change" />
     <h2>props:{{cnum2}}</h2>
     <input type="text"  :value="dnum2" @input="num2change" />
   </div>
 </template>

 <!--
  需求1 子组件的cnum1 ，cnum2 分别绑定父组件的num1，num2  这个简单

  需求2 子组件 定义2个 input  分别输入之后，需要改变子组件的cnum1，父组件的num1  如果采用v-model 这样做是有问题的，而且客户端也会报错
  Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.
  Instead, use a data or computed property based on the prop's value. Prop being mutated: "cnum1"

  可以看到vue提示 在子组件里面定义data函数或者计算属性

   在子组件中不要是去修改props 中属性的值  ，通过$emit  发射一个方法 传递给 父组件，让父组件的值修改就能达到修改子组件中的值，因为子组件的值，是父组件传递快来的

  需求3  第一个 text = 第二个text *100     当然对应关联值也要修改
  -->
     <script src="../js/vue.js"></script>
     <script>
       const app=new Vue({
         el: '#app',
         data: {
           message:'你好vue',
           num1: 1,
           num2: 0
         },
         methods:{
           num1change(value){
             this.num1=parseInt(value)
           },
           num2change(value){
             this.num2=parseInt(value)
           },
         },
         components:{
           cpn: {
             template: '#cpn',
             props: {
               cnum1: {
                 type: Number
               },
               cnum2:{
                 type: Number
               }
             },
             data(){
               return {
                 dnum1: this.cnum1,
                 dnum2: this.cnum2,
               }
             },
             methods:{
               num1change(event){
                 this.dnum1=event.target.value;
                 //发射事件给父组件  将cnum1 改变
                 this.$emit('num1change',this.dnum1)

                 this.dnum2=this.dnum1*100
                 //再次发射一个事件给子组件  改变  num2得值
                 this.$emit('num2change',this.dnum2)
               },
               num2change(event){
                 this.dnum2=event.target.value;
                 //发射事件给父组件  讲cnum2 改变
                 this.$emit('num2change',this.dnum2)

                 this.dnum1=this.dnum2/100
                 //再次发射一个事件给子组件  改变  num2得值
                 this.$emit('num1change',this.dnum1)
               },
             }
           }
         }
       })
     </script>
</body>
</html>